<template>
  <div class="card">
    <div v-for="(item, index) in list" :key="index">
      <van-cell v-if="item.module == 52">
        <!-- 使用 title 插槽来自定义标题 -->
        <template #title>
          <span class="custom-title">{{ item.name }}</span>
        </template>
        <template #label>
          <div v-for="(v1, i1) in item.list" :key="i1">
            <div class="content-item" v-if="i1 == 0" @click="gotoBookLook(v1.id)">
              <img class="thumb" :src="v1.cover" alt="" />
              <div class="label-right">
                <span class="title">{{ v1.title }}</span>
                <div class="author">
                  <span>{{ v1.author + "/" + v1.category }}</span>
                </div>
                <p class="test-desc">{{ v1.content }}</p>
              </div>
            </div>

            <div class="content-item2" v-else>
              <div class="content-item2-x" @click="gotoBookLook(v1.id)">
                <img class="thumb2" :src="v1.cover" alt="" />
                <div class="bottom">
                  <div class="title-smart">{{ v1.title }}</div>
                  <div class="author-bottom">{{ v1.author }}</div>
                </div>
              </div>
            </div>
          </div>
        </template>
      </van-cell>

      <van-cell v-if="item.module == 36">
        <!-- 使用 title 插槽来自定义标题 -->
        <template #title>
          <span class="custom-title">{{ item.name }}</span>
        </template>
        <template #label>
          <div v-for="(v1, i1) in item.list" :key="i1">
            <div class="content-item" @click="gotoBookLook(v1.id)">
              <img class="thumb" :src="v1.cover" alt="" />
              <div class="label-right">
                <span class="title">{{ v1.title }}</span>
                <div class="author">
                  <span>{{ v1.author + "/" + v1.category }}</span>
                </div>
                <p class="test-desc2">{{ v1.content }}</p>
              </div>
            </div>
          </div>
        </template>
      </van-cell>

      <van-cell v-if="item.module == 34">
        <!-- 使用 title 插槽来自定义标题 -->
        <template #title>
          <span class="custom-title">{{ item.name }}</span>
        </template>
        <template #label>
          <div v-for="(v1, i1) in item.list" :key="i1">
            <div class="content-item3"  @click="gotoDetail({id:v1.id,title:v1.title})">
              <div class="content-item3-x">
                <img class="thumb3" :src="v1.cover" alt="" />
                <div class="bottom">
                  <div class="title-smart2">{{ v1.title }}</div>
                </div>
              </div>
            </div>
          </div>
          <div class="btn-to">
            查看榜单
            <van-icon name="arrow" />
          </div>
        </template>
      </van-cell>
    </div>
  </div>
</template>

<script>
export default {
  name: "card",
  props: {
    list: [],
  },
  methods:{
    gotoDetail(obj) {
      // console.log(title);
      this.$router.push({name:"BookDetail",params:{id:obj.id,title:obj.title}})
    },
    gotoBookLook(id) {
      // console.log(title);
      this.$router.push({name:"BookContent",params:{id:id}})
    }
  }
};
</script>

<style lang="less" scoped>
.card-title {
  font-size: 18px;
}
.van-cell {
  margin-bottom: 5px;
  border-bottom: 1px solid #f5f5f5;
}
.van-card {
  padding: 0;
}
.van-card__title {
  font-size: 16px;
}

.custom-title {
  margin-right: 4px;
  vertical-align: middle;
  font-size: 17px;
  color: #000;
}

.search-icon {
  font-size: 16px;
  line-height: inherit;
}
/deep/.test-desc {
  // background-color: red;
  width: 250px;
  height: 50px;
  // white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  font-size: 10px;
}
/deep/.test-desc2 {
  width: 250px;
  height: 35px;
  // white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  font-size: 10px;
}
.thumb {
  width: 80px;
  height: 100px;
  background-color: #f8f8f8;
}
.thumb2 {
  width: 70px;
  height: 90px;
  background-color: #f8f8f8;
}

.content-item {
  display: flex;
  margin-top: 7px;
  //书的描述信息(右边)
  .label-right {
    margin-left: 5px;
    .author {
      margin-top: 5px;
    }
    .title {
      font-size: 14.5px;
      color: #000;
      display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    }
  }
}
.content-item2 {
  margin-top: 5px;
  //   background-color: red;
  display: inline-block;
  float: left;
  height: 150px;
  .content-item2-x {
    margin-right: 5px;
    // justify-content: space-between;
  }
  .title-smart {
    width: 80px;
    font-size: 13.5px;
    color: #000;
    word-break: break-all;
  }
  .author-bottom {
    font-size: 10px;
  }
}
//34的公共样式
.content-item3 {
  margin-top: 5px;
  //   background-color: red;
  display: inline-block;
  float: left;
  height: 150px;
  .content-item3-x {
    margin-right: 14px;
    padding-bottom: 30px;
    // justify-content: space-between;
  }
  .title-smart2 {
    width: 80px;
    font-size: 12px;
    color: #000;
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}
/deep/.btn-to {
  position: absolute;
  top: 190px;
  left: 150px;
  // text-align: center;
  // margin: 0 auto;
  // background-color: red;
}
.thumb3 {
  width: 100px;
  height: 120px;
  background-color: #f8f8f8;
}
</style>